import { Redirect } from 'react-router-dom'
import { Link, Route, Switch } from 'react-router-dom'
import RankingDetail from '../RankingDetail'

export default function Ranking(props) {
  return (
    <div>
      <nav className='nav'>
        <Link
          className='nav-link'
          aria-current='page'
          to='/findmusic/ranking/detail?id=飙升榜'
        >
          飙升榜
        </Link>
        <Link className='nav-link' to='/findmusic/ranking/detail?id=新歌榜'>
          新歌榜
        </Link>
        <Link className='nav-link' to='/findmusic/ranking/detail?id=原创榜'>
          原创榜
        </Link>
      </nav>
      <div className='alert alert-light' role='alert'>
        <Switch>
          {/* 加了 exact 会精确匹配，精确匹配，匹配的是路径，不包括 query 参数 */}
          <Redirect
            from='/findmusic/ranking'
            to='/findmusic/ranking/detail?id=飙升榜'
            exact
          />
          <Route path='/findmusic/ranking/detail' component={RankingDetail} />
        </Switch>
      </div>
    </div>
  )
}
